<template>
	<view class="item" :style="`width:${width}`">
		<u-row>
			<view class="photo">
				<slot name="photo"></slot>
			</view>
			<view class="content">
				<view class="left">
					<p class="title">{{title}}</p>
					<p class="details">{{details}}</p>
					<slot name="details">
						
					</slot>
				</view>
				<view class="right" v-if="link">
					<uni-icons type="right" size="25" color="#8C9198"></uni-icons>
				</view>
				<slot name="vaule"></slot>
			</view>
		</u-row>

	</view>
</template>

<script>
	export default {
		props: ['title','details','link','width'],
		data() {
			return {
				showPhoto:true,
			}
		},
		methods: {

		}
	}
</script>

<style>
	.item {
		width: 750rpx;
		background: #FFFFFF;
		box-shadow: 0rpx 6rpx 12rpx 2rpx rgba(151, 151, 151, 0.16);
		padding: 8rpx 0 14rpx 28rpx;
		margin-bottom: 22rpx;
	}

	.photo {
		width: 132rpx;
		height: 132rpx;
		background: #EFF1F3;
		border-radius: 20rpx;
		display: flex;
		justify-content: space-evenly;
		align-items: center
	}

	.content {
		width: 540rpx;
		height: 132rpx;
		padding-left: 48rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}
	.left .title{
		font-size: 28rpx;
		color: #1D2027;
		margin-bottom: 12rpx;
	}
	.left .details{
		font-size: 22rpx;
		color: #989898;
	}
</style>